<template>
  <div class="home-hot">
    <div class="hot-top">
      <div class="hot-top-right">
        <span class="iconfont icon-remen"></span>
        <span>本周热门榜单</span>
      </div>
      <div class="hot-top-left">
        <span>全部榜单 ></span>
      </div>
    </div>
    <ul class="hot-list">
      <li class="list-item" v-for="item in itemList" :key="item.id">
        <img :src="item.src" />
        <p>{{item.addressName}}</p>
        <p>
          <span>{{item.price}}</span>起
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      itemList: [
        {
          id: 0,
          addressName: '丽江',
          price: '￥899',
          src:
            '//imgs.qunarzz.com/p/p70/1809/e7/4941057a6aae702.jpg_256x160_9fee6ccb.jpg'
        },
        {
          id: 1,
          addressName: '青岛',
          price: '￥599',
          src:
            '//imgs.qunarzz.com/p/p32/1504/46/5a0a9ac552e26d.jpg_256x160_a63acde6.jpg'
        },
        {
          id: 2,
          addressName: '三亚',
          price: '￥599',
          src:
            '//imgs.qunarzz.com/p/p66/201304/17/384810d022dd28f793835fbb.jpg_256x160_6a7ec251.jpg'
        },
        {
          id: 3,
          addressName: '张家界',
          price: '￥1899',
          src:
            '//imgs.qunarzz.com/sight/p0/1612/14/14bef79602a7780a3.water.jpg_256x160_3424b8ae.jpg'
        },
        {
          id: 4,
          addressName: '拉萨',
          price: '￥899',
          src:
            'https://imgs.qunarzz.com/p/tts3/1702/ab/3088ef3061ebd202.jpg_r_480x320x95_b2f37731.jpg'
        },
        {
          id: 5,
          addressName: '成都',
          price: '￥699',
          src:
            'https://imgs.qunarzz.com/p/tts3/1503/4c/72cc93f07c9d59.jpg_r_480x320x95_80a2cbb5.jpg'
        },
        {
          id: 6,
          addressName: '西双版纳',
          price: '￥2899',
          src:
            'https://imgs.qunarzz.com/vs_ceph_b2c_001/4a4c224a-d43c-4712-8ae3-9773f9fc0f7a.jpg_r_480x320x95_e5958153.jpg'
        }
      ]
    }
  }
}
</script>

<style scoped>
.home-hot {
  background: #fff;
}
.hot-top {
  width: 100%;
  display: flex;
  position: relative;
  line-height: 0.6rem;
}
.hot-top-right > span:nth-of-type(1) {
  color: red;
  font-size: 0.4rem;
  font-weight: 600;
  margin: 0 0.1rem;
}
.hot-top-right > span:nth-of-type(2) {
  color: #333;
  font-size: 0.3rem;
  font-weight: 600;
}
.hot-top-left {
  position: absolute;
  right: 0.2rem;
  color: #333;
}

/* 列表 */
.hot-list {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.list-item {
  display: inline-block;
  padding: 0 0.2rem;
  width: 1.48rem;
  height: 1.48rem;
}
.list-item img {
  width: 100%;
  height: 100%;
  border-radius: 0.04rem;
}
.list-item > p:nth-of-type(1) {
  color: #333;
  font-size: 0.36rem;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.list-item > p:nth-of-type(2) {
  color: #333;
  font-size: 0.26rem;
}
.list-item > p:nth-of-type(2) > span {
  font-size: 0.36rem;
  color: rgb(204, 134, 88);
  text-align: center;
}
</style>
